<template>
  <div class="environment"
       ref="environment"></div>
</template>

<script>
export default {
  name: 'EchartsEnvironment',
  mounted () {
    this.environment();
  },
  methods: {
    environment () {
      const myChart = this.$echarts.init(this.$refs["environment"]);
      myChart.setOption({
        grid: {
          left: "15%"
        },
        tooltip: {
          trigger: "axis",
          textStyle: {
            align: "left"
          },
          formatter (p) {
            return `
                2018-08<br>
                ${p[0].marker}水浸预警：${p[0].data}次<br>
                ${p[1].marker}火灾预警：${p[1].data}次<br>
                ${p[2].marker}空气成分预警：${p[2].data}次
              `;
          }
        },
        legend: {
          data: ["水浸预警", "火灾预警", "空气成分预警"],
          icon: "circle",
          left: "6%",
          itemHeight: 9
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["6月", "7月", "8月", "9月", "10月", "11月", "12月"],
          axisLine: {
            lineStyle: {
              color: "#ccc"
            }
          },
          axisLabel: {
            color: "#000"
          }
        },
        yAxis: [
          {
            type: "value",
            splitLine: {
              lineStyle: {
                type: "dashed"
              }
            },
            axisTick: {
              show: false //x轴刻度
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              show: false
            }
          },
          {
            type: "category",
            position: "left",
            offset: 10,
            data: [2, 4, 6, 8, 10, 12],
            boundaryGap: false,
            axisTick: {
              show: false //x轴刻度
            },
            axisLine: {
              show: false
            }
          }
        ],
        series: [
          {
            name: "水浸预警",
            type: "line",
            stack: "总量",
            data: [120, 132, 101, 134, 90, 230, 210],
            color: "#35C460"
          },
          {
            name: "火灾预警",
            type: "line",
            stack: "总量",
            data: [220, 182, 191, 234, 290, 330, 310],
            color: "#2B9AEA"
          },
          {
            name: "空气成分预警",
            type: "line",
            stack: "总量",
            data: [150, 232, 201, 154, 190, 330, 410],
            color: "#FF9900"
          }
        ]
      });
    }
  }
};
</script>